import { View, Image, Text, Button } from "@tarojs/components";
import { useEffect, useState } from "react";
import { AtIcon, AtFloatLayout, AtInput, AtForm } from 'taro-ui'
import Taro, { useShareAppMessage } from '@tarojs/taro'
import './comment.scss'

import headPortrait from "../img/headPortrait.png";
import issImg from "../img/issImg.jpg";
import user1 from "../img/user1.png";
import NavBar from "../../../components/topbar/topbar";
import issue from "../img/issue.png";
import share from "../img/share.png";
import comment2 from "../img/comment.png"
import like1 from "../img/like1.png"
import like2 from "../img/like2.png"
import Delete from "../img/Delete.png"
import PublicationComments from "../../../components/comments/content"
// import comment2 from "../img/comment2.png";
import { Current } from "@tarojs/runtime"


function comment() {
  const [isOpen, setOpen] = useState(false);
  const [isRight, setOpen2] = useState(true);
  const [isRight2, setOpen3] = useState(true);
  // const [current, setCurrent] = useState(0);
  const [list, setList] = useState({})
  const userName = Taro.getStorageSync("userInfo").nickName
  //调用云函数数对本帖子所有的评论进行提取和展示
  const [comments_Lists, setComments_Lists] = useState([])
  useEffect(() => {
    //接收帖子的完整信息
    let data = JSON.parse(decodeURIComponent(Current.router.params.oneData))
    setList(data)

    //调用云函数，获取该帖子的评论
    // const comments = () => {
    Taro.cloud.callFunction({
      name: "comments",
      data: {
        $url: "find_Comments",
        openid: data.cmt_id,
        title: data.title
      }
    }).then(res => {
      // console.log("完成评论云函数的调用:", res.result.res.data)
      setComments_Lists(res.result.res.data)
    })
  // }
    // setInterval(comments, 1000)
  }, [])

  // console.log("oneData:", list)
  console.log("该帖子的所有评论:", comments_Lists)
  const handleClick1 = () => {
    Taro.navigateTo({
      url: '/pages/postBar/postBar',
    });
  };
  const handleClick2 = () => {
    Taro.navigateTo({
      url: '/pages/details/shareCard/shareCard'
    })
  }

  useShareAppMessage(res => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  })


  const changeOpen = () => {
    setOpen(true)
  }

  const changeRight = () => {
    setOpen2(!isRight)
  }
  //点赞
  const changeRight2 = (id, Thumbs_up, personIn, isLike) => {
    console.log("id:", id);
    console.log("personIn:",personIn)
    const newData = { _id: id, person_name: Thumbs_up };
    // 执行点赞操作
    const addLike = () => {
      Taro.cloud.callFunction({
        name: "comments",
        data: {
          $url: "addLike",
          newData
        }
      }).then(res => {
        console.log("addlike:", res)
      })
    }
    if ((personIn == null)||(personIn ==[])) {
      console.log(1)
      addLike()
    } else {
      personIn.map(element => {
        if (userName == element.name) {
          console.log(2)
          Taro.cloud.callFunction({
            name: "comments",
            data: {
              $url: "delLike",
              newData
            }
          }).then(res => {
            console.log("addlike:", res)
          })
        } else {
          console.log(3)
          addLike()
        }
      });

    }
    setOpen3(!isRight2);
  }
  const toBack = () => {
    Taro.navigateBack().then();
  }
  const toHome = () => {
    Taro.redirectTo({ url: "/pages/firstPage/firstPage" }).then();
  }
  //可以用于多张图片的游览
  const scan = item => {
    console.log("item", item);
    Taro.previewImage({
      current: item[0], // 当前显示图片的http链接
      urls: item // 需要预览的图片http链接列表
    })
  }

  const comments_List = comments_Lists.map(item => (

    <View className="otherComments">
      <View className="otherMessage">
        <Image style="width: 40px;height: 40px; border-radius:50%" src={item.comments_url}></Image>
        <View className="other">
          <View className="otherName">{item.person_name}</View>
          <View className="otherTime">1天前</View>

          <View className="otherText">
            {item.comments_contents}
          </View>

        </View>
      </View>
      <View className="otherIdea">
        {/* 点赞 */}
        <View
          onClick={() => {
            changeRight2(item._id, userName, item.love_people, item.like);
          }}
        >
          {(item.love_people == null||item.love_people == []) ? (
            <AtIcon
              className="heart"
              value="heart"
              size="25"
              color="#000"
            />
          ) : (item.love_people.map(element => {
            if (userName == element.name) {
              return (
                <AtIcon
                  className="heart"
                  value="heart-2"
                  size="25"
                  color="#f00"
                />
              )
            } else {
              return (
                <AtIcon
                  className="heart"
                  value="heart"
                  size="25"
                  color="#000"
                />
              )
            }
          }))
          }
        </View>
      </View>
    </View>

  ))
  return (
    <View className="commentBox">
      {/* 导航栏 */}
      <View className="nav">
        <NavBar
          // onClickLeftIcon={handleClick1}
          color="#000"
          title="贴吧"
          back={true}
          nback={toBack}
          home={true}
          onHome={toHome}
        />
      </View>
      {/* 内容 */}
      <View>
        <View className="content1User">
          <Image style="width: 40px;height: 40px; border-radius:50%" src={list.author_url}></Image>
          <View className="contentName">
            <View>{list.author}</View>
            <View className="contentDelete">
              <View>1天前</View>
              <Image style="width: 20px;height: 20px" className="Delete" src={Delete}/>
            </View>
          </View>
        </View>

        <View className="content1Text">
          {list.contents}
        </View>

        {/* 图片展示 */}
        <View className="content1Img">
          <Image mode="widthFix"  onClick={() => scan(list.picture)} src={list.picture !== undefined ? (list.picture.length < 2 ? list.picture : list.picture[0]) : undefined}></Image>
        </View>

        {/* 分享评论点赞 */}
         <View className="contentBox">
          {/* 分享 */}
          {/* <View className="contentShare">
            <View onClick={() => changeOpen()}>
              <Image style="width:25px;height:25px" src={share}></Image>
            </View> */}
            {/* 分享数 */}
            {/* <View className="shareText">分享</View>
          </View>
          <AtFloatLayout isOpened={isOpen}>
            <View className="sharebox">
              <Button className="sFriend" openType="share">
                <Image className="WeChat" src={WeChat} />
                <View className="WeChatText">分享给微信好友</View>
              </Button>
            </View>
            <Button className="cancel" onClick={() => setOpen(false)}>
              取消
            </Button>
          </AtFloatLayout> */}
          {/* 分享 */}
          <Button className="shareBotton" openType="share" onClick={() => changeOpen()}>
                    <Image style="width:25px;height:25px" src={share}/>
          </Button>

          {/* 评论 */}
          <View className="contentComment">
            <View>
              <Image style="width:25px;height:25px" src={comment2}></Image>
            </View>
          {/* 评论数 */}
            {/* <View className="commentNum">100</View> */}
          </View>

          {/* 点赞 */}
          <View className="contentLike">
            <View className="likeImg"
            onClick={() => {
              changeRight();
            }}
          >
            {isRight ? 
            (
              <Image style="width:25px;height:25px" src={like1}></Image>
               ) : (
              <Image style="width:25px;height:25px" src={like2}></Image>
            )}
          </View>
          {/* 点赞数 */}
          {/* <View className="likeNum">100</View> */}
          </View>

        </View>

        {/* 其他用户评论 */}
        {comments_List}
        <View className="notSee">看不到 看不到 看不到吧</View>

        {/* 弹出评论框 */}
        <PublicationComments props={list}/>
      </View>
    </View>
  );

}
export default comment;